<template>
  <div id="index">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body">
      <div class="body-box">
        <!-- 第三行数据 -->
        <div class="content-box">
          <div>
            <dv-border-box-12>
              <centreLeft1 />
            </dv-border-box-12>
          </div>
          <div>
            <dv-border-box-12>
              <centreLeft2 />
            </dv-border-box-12>
          </div>
          <!-- 中间 -->
          <div>
            <center />
          </div>
          <!-- 中间 -->
          <div>
            <centreRight2 />
          </div>
          <div>
            <dv-border-box-13>
              <centreRight1 />
            </dv-border-box-13>
          </div>
        </div>

        <!-- 第四行数据 -->
        <div class="bototm-box">
          <dv-border-box-13>
            <bottomLeft />
          </dv-border-box-13>
          <dv-border-box-12>
            <bottomRight />
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/style.scss'
import centreLeft1 from './centreLeft1'
import centreLeft2 from './centreLeft2'
import centreRight1 from './centreRight1'
import centreRight2 from './centreRight2'
import showTime from './showTime'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'
export default {
  components: {
    centreLeft1,
    centreLeft2,
    centreRight1,
    centreRight2,
    showTime,
    center,
    bottomLeft,
    bottomRight
  },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.cancelLoading()
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/index.scss";
</style>
